﻿<template>
  <div>
    <h1>生命周期钩子演示</h1>

    <p>数据: {{ data }}</p>
    <button @click="updateData">更新数据</button>
    <p>
      <p>onServerPrefetch：此钩子仅在服务端渲染期间执行，用于执行数据预抓取。</p>
      <p>onBeforeMount、onMounted：在组件挂载之前和之后执行，常用于初始化和依赖DOM的操作。</p>
      <p>onBeforeUpdate、onUpdated：在组件更新之前和之后执行，用于访问和响应DOM更新。</p>
      <p>onBeforeUnmount、onUnmounted：在组件销毁前后执行，用于执行清理操作。</p>
      <p>onActivated、onDeactivated：当组件在中被激活或停用时调用。</p>
      <p>updateData：用户定义的方法，用于更新组件数据，演示组件响应式系统的工作。</p>
    </p>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  onBeforeMount,
  onUpdated,
  onUnmounted,
  onBeforeUpdate,
  onBeforeUnmount,
  onActivated,
  onDeactivated,
  onServerPrefetch, reactive
} from 'vue';

// 响应式状态
const data = ref(null);

// 服务端预抓取数据的模拟函数
async function fetchDataFromServer() {
  return new Promise(resolve => setTimeout(() => resolve("从服务器抓取的数据"), 1000));
}

// 客户端抓取数据的模拟函数
async function fetchDataFromClient() {
  return new Promise(resolve => setTimeout(() => resolve("从客户端抓取的数据"), 1000));
}

// onServerPrefetch - 服务端预抓取数据
onServerPrefetch(async () => {
  data.value = await fetchDataFromServer();
});

// onBeforeMount - 组件挂载前
onBeforeMount(() => {
  console.log('组件即将挂载');
});

// onMounted - 组件挂载后
onMounted(async () => {
  if (!data.value) {
    data.value = await fetchDataFromClient();
  }
  console.log('组件已挂载');
});

// onBeforeUpdate - DOM更新前
onBeforeUpdate(() => {
  console.log('DOM即将更新');
});

// onUpdated - DOM更新后
onUpdated(() => {
  console.log('DOM已更新');
});

// onBeforeUnmount - 组件卸载前
onBeforeUnmount(() => {
  console.log('组件即将卸载');
});

// onUnmounted - 组件卸载后
onUnmounted(() => {
  console.log('组件已卸载');
});

// onActivated - 组件激活时（KeepAlive）
onActivated(() => {
  console.log('组件已激活');
});

// onDeactivated - 组件停用时（KeepAlive）
onDeactivated(() => {
  console.log('组件已停用');
});

// 更新数据的方法
function updateData() {
  data.value = `数据更新于 ${new Date().toLocaleTimeString()}`;
}
</script>
